<template>
  <div class="home">
    <div class="step_">
      <el-steps :active="3">
        <el-step title="步骤 1" description="添加商品基本信息"></el-step>
        <el-step title="步骤 2" description="添加商品参数"></el-step>
        <el-step title="步骤 3" description="添加商品介绍"></el-step>
        <el-step title="步骤 4" description="添加商品图片"></el-step>
      </el-steps>
    </div>
    <div class="editor-container ue_css">
      <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
    </div>
    <div class="ing_">
      <el-button type="primary" class="but_sub" @click="submitForm" v-if="goodssubmit == true">提交</el-button>
      <el-button class="but_sub lef_t" @click="resetForm" v-if="goodssubmit == false">下一步</el-button>
      <el-button class="but_sub lef_t" @click="resetFormNext" v-if="etcli == true">下一步</el-button>
      <el-button class="" type="danger" style="float: right" @click="updateuvergoods" v-if="etcli == true">退出</el-button>
    </div>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import UE from 'cs/admin/editor/ue.vue';
  export default {
    components: {
      UE,
      mapGetters
    },
    data(){
      return {
        defaultMsg: '',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        ue1: "ue1", // 不同编辑器必须不同的id
        goodssubmit:true,
        etcli:false,
        windowsHref:'',
      }
    },
    methods: {
      submitForm(){//提交
        switch (this.windowsHref) {
          case 'Updateaddgoodsintroduce':  //修改
            this.goodssubmit = true;
            break;
          case 'addgoodsintroduce':
            this.goodssubmit = false;
            break;
        }
        let content = this.$refs.ue.getUEContent(); // 调用子组件方法
        this.http.post({
          'api': 'editGoods',
          'data': {
            'data': [
              {
                "id":this.Obtaingoodsflag,
                "introduce":content
              }
            ]
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$notify({
              title: '添加商品介绍成功！',
//              message: content,
              type: 'success'
            });

          }
        }, (err) => {
          this.$h.Ed(err,this);
        })
      },
      updateuvergoods(){ //修改结束
        this.$store.commit('goodsflag', 0);
        this.$store.commit('Deposit', []);
        this.$router.push('./mygoods');
      },
      resetForm(){  //下一步
        this.goodssubmit = true;
        this.$router.push('./addgoodsimg');
      },
      resetFormNext(){
        this.goodssubmit = true;
        this.$router.push('./Updateaddgoodsimg');
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
        'Obtaingoodsflag',
        "seegoods"
      ]),
    },
    created(){
      var win = window.location.href.split("#/");
      this.windowsHref = win[1];
    },
    mounted(){
      if(this.seegoods.length != 0){
          this.etcli = true;
        this.defaultMsg = this.seegoods.introduce
      }
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }
  .ing_ {
    width: 27%;
    margin: auto;
    padding-top: 2%;
  }
  .step_ {
    width: 70%;
    height: 75px;
    margin-bottom: 2%;
  }
  .info {
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
  .ue_css{
    width: 100%;
    margin:auto
  }
</style>
